<template>
  <div>
    <div ref="main" class="main" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['isSmooth'],
  data () {
    return {}
  },
  mounted () {
    // console.log(this.$refs.main);
    const myChart = echarts.init(this.$refs.main)
    // 绘制图表
    myChart.setOption({
      // 设置与x轴相关属性
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      // 设置与y轴相关属性
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135], // 常见应该是动态数据
          type: 'line', // 设置图表类型
          smooth: this.isSmooth, // 设置线条为平滑曲线
          itemStyle: {
            //   设置折线图面积区域颜色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1CD8D2' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#ffffff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          areaStyle: {}
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.main {
  height: 300px;
  width: 100%;
}
</style>
